<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>英雄管理主页</title>
    <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css" />
    <style>
      .panel {
        width: 900px;
        margin: 10px auto;
      }

      .table img {
        width: 40px;
        height: 40px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <div class="panel panel-primary">
        <!-- Default panel contents -->
        <div class="panel-heading">英雄列表管理</div>
        <div class="panel-body">
          <!-- 存放的搜索区域 -->
          <div class="row">
            <div class="col-xs-6">
              <div class="input-group">
                <input type="text" id="hname" class="form-control" placeholder="输入英雄信息..." />
                <span class="input-group-btn">
                  <button class="btn btn-default" id="btn_search" type="button">搜索</button>
                </span>
              </div>
              <!-- /input-group -->
            </div>
            <!-- /.col-xs-6 -->
            <div class="col-xs-3 col-xs-offset-3">
              <!-- 添加英雄的按钮 -->
              <!-- 
              🧨调用模态框的两个属性：
                  data-toggle="modal"                 🧨 调用切换模态框功能
                  data-target="#exampleModal"         🧨 要调用哪个模态框
            -->
              <button
                data-toggle="modal"
                data-target="#exampleModal"
                type="button"
                class="btn btn-success"
              >
                添加英雄
              </button>
            </div>
          </div>
        </div>

        <!-- Table -->
        <table class="table">
          <thead>
            <tr>
              <th>编号</th>
              <th>英雄名称</th>
              <th>英雄性别</th>
              <th>头像</th>
              <th>操作区</th>
            </tr>
          </thead>
          <!-- 表格主体 -->
          <tbody id="tbody">
            <!-- tr 是一行内容 -->
            <tr>
              <td>1</td>
              <td>大乔</td>
              <td>女</td>
              <td><img src="" /></td>
              <td>
                <button type="button" class="btn btn-warning">上传头像</button>
                <button type="button" class="btn btn-danger">删除</button>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <!-- 上传按钮  display: none; 把按钮隐藏起来，但是点击按钮还是可以实现上传的 -->
      <input type="file" id="uploadFile" style="display: none" />

      <!-- 🧨模态框的结构 - CV过来的 -->
      <div
        class="modal fade"
        id="exampleModal"
        tabindex="-1"
        role="dialog"
        aria-labelledby="exampleModalLabel"
      >
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
              <h4 class="modal-title" id="exampleModalLabel">添加英雄</h4>
            </div>
            <div class="modal-body">
              <form>
                <div class="form-group">
                  <label for="recipient-name" class="control-label">英雄名称:</label>
                  <input
                    type="text"
                    placeholder="请输入英雄名称"
                    class="form-control"
                    id="heroName"
                  />
                </div>
                <div class="form-group">
                  <label for="message-text" class="control-label">英雄性别:</label>
                  <label><input type="radio" checked value="男" name="gender" /> 👦男</label>
                  <label><input type="radio" value="女" name="gender" /> 👩‍🦰女</label>
                </div>
              </form>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
              <button id="addHeroBtn" type="button" class="btn btn-primary">添加</button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 🧨 必须先引入 jquery.js 再引入 bootstrap.js -->
    <script src="./lib/jquery/jquery.min.js"></script>
    <script src="./lib/bootstrap/js/bootstrap.js"></script>
    <script>
      // 自己的业务代码
      $(() => {
        
      })
    </script>
  </body>
</html>
